<template>
  <div class="box" ref="box">
    <div class="left" id="left">
      <p>标签树</p>
      <div class="left-search">
        <el-input
          suffix-icon="el-icon-search"
          v-model="filterText"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <!--左侧div内容-->
      <el-tree
        :data="data"
        ref="leftTree"
        class="tree tag-tree"
        node-key="tagCode"
        draggable
        accordion
        :default-expanded-keys="['migu']"
        :filter-node-method="filterNode"
        :props="defaultProps"
        :allow-drop="returnFalse"
        :allow-drag="allowDrag"
        @node-drag-start="handleDragstart"
        @node-drag-end="handleDragend"
      >
        <div slot-scope="{ node }" class="custom-tree-node">
          <el-popover
            placement="right"
            width="200"
            trigger="hover"
            :open-delay="0"
            v-if="node.isLeaf"
          >
            <div>
              <p>标签名称:{{ node.label }}</p>
              <p>最近更新时间:20210506</p>
              <p>更新周期:按自然周</p>
              <p>客户数:20210506</p>
              <p>标签口径:20210506</p>
            </div>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text">收藏</el-button>
              <el-button type="text" size="mini">标签详情</el-button>
            </div>

            <span slot="reference">{{ node.label }}</span>
          </el-popover>
          <span v-else>{{ node.label }}</span>
        </div>
      </el-tree>
      <!-- <div class="footer" @click="leftControl">{{ isOpen ? '《' : '》' }}</div> -->
    </div>
    <div class="resize" title="收缩侧边栏">⋮</div>
    <!-- 右侧 -->
    <div class="mid">
      <div class="mid-attenion">
        <p>标签规则设置</p>
        <p>
          注意：① 融合业务场景标签请设置号码归属省；② 客户群最后去各体系交集
        </p>
      </div>
      <!--右侧div内容-->
      <el-tabs
        v-model="editableTabsValue"
        type="card"
        editable
        @edit="handleTabsEdit"
      >
        <el-tab-pane
          :key="item.name"
          v-for="item in editableTabs"
          :label="item.title"
          :name="item.name"
          :closable="true"
        >
          <div class="tag-title">
            <div>
              客群规模：
              <span class="targetCount" v-if="item.name === '咪咕标签'"
                >193671623</span
              >
              <span class="refresh" v-if="item.name === '咪咕标签'"
                ><i class="el-icon-refresh-right"></i>刷新
              </span>
            </div>
            <div class="tag-title-right">
              <span @click="combinationTag">组合标签</span
              ><span @click="initRules"> 清空规则</span>
            </div>
          </div>
          <p>
            操作提示：
            请将左侧标签拖拽至本区域后设置规则；按住Ctrl键拖动即可复制当前节点。
          </p>
          <el-tree
            :data="treeData2[item.name]"
            :expand-on-click-node="false"
            class="tree custom-tree"
            node-key="id"
            ref="rightTree"
            show-checkbox
            draggable
            :check-strictly="true"
            default-expand-all
            :allow-drop="allowDrop"
            @node-drag-start="handleDragStart"
            @node-drag-end="handleDragEnd"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <div class="custom-tree-node-left">
                <i
                  class="union-type"
                  :style="{
                    display: node.childNodes.length > 1 ? 'block' : 'none',
                    top: node.childNodes.length * 24 + 'px'
                  }"
                  @click="toggleUnionType(data)"
                  >{{ unionTypeTxt[data.unionType] || '且' }}</i
                >
                <span class="el-tree-node__label tag-name">{{
                  node.data.columnName
                }}</span>
                <span v-if="returnRootNode(node)">
                  <el-select
                    v-model="data.calType"
                    placeholder="请选择"
                    size="mini"
                  >
                    <el-option label="=" value="="> </el-option>
                    <el-option label="≠" value="!="> </el-option>
                  </el-select>
                </span>
                <span
                  class="el-tree-node__label tag-label"
                  v-if="returnRootNode(node)"
                  >请设置分段值</span
                >
                <span class="delete-btn" v-if="returnRootNode(node)">
                  <el-button
                    type="text"
                    size="medium"
                    icon="el-icon-circle-close"
                    @click="() => removeNode(node, data)"
                  >
                  </el-button>
                </span>
              </div>
              <span v-if="returnRootNode(node)">
                <span class="special-tag" v-if="node.data.isFission === 1"
                  >裂变</span
                >
                <span class="special-tag" v-if="node.data.isCyclicity === 1"
                  >周期性</span
                >
                <el-popover
                  v-if="node.isCyclicity === 1"
                  placement="bottom"
                  width="200"
                  trigger="click"
                  content="当前用户以20210525为例,每期输出客群人数会根据输出日期发生变动
"
                >
                  <span slot="reference">{{
                    !node.count ? '计算中....' : node.count
                  }}</span>
                </el-popover>
                <span v-else>{{
                  !node.count ? '计算中....' : node.count
                }}</span>
              </span>
            </span>
          </el-tree>
        </el-tab-pane>
      </el-tabs>
      <!-- <div class="footer">
        <el-button type="primary" @click="keepSave">保存</el-button>
      </div> -->
    </div>
    <!-- 新增tab弹框 -->
    <el-dialog
      title="选择新增标签规则（单选）"
      center
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      custom-class="addTab"
    >
      <el-radio-group
        v-model="proTab"
        size="mini"
        @change="proTabChange(proTab)"
      >
        <el-radio label="云南标签" border>省专标签-云南 </el-radio>
        <el-radio label="北京标签" border>省专标签-北京 </el-radio>
      </el-radio-group>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      filterText: '',
      data: [
        {
          tagCode: 'consume',
          tagName: '消费属性',
          tagType: null,
          tagClass: 1,
          parentCode: '00000',
          fullId: null,
          children: [
            {
              tagCode: 'consume_2001',
              tagName: '视频',
              tagType: null,
              tagClass: 2,
              parentCode: 'consume',
              fullId: null,
              children: [
                {
                  tagCode: '3153',
                  tagName: '视频会员',
                  tagType: 1,
                  tagClass: 3,
                  parentCode: 'consume_2001',
                  fullId: null,
                  children: []
                },
                {
                  tagCode: 'consume_31001',
                  tagName: '最近一次消费时间\n',
                  tagType: 2,
                  tagClass: 3,
                  parentCode: 'consume_2001',
                  fullId: null,
                  children: []
                },
                {
                  tagCode: 'consume_31002',
                  tagName: '最近一次消费内容\n',
                  tagType: 2,
                  tagClass: 3,
                  parentCode: 'consume_2001',
                  fullId: null,
                  children: []
                },
                {
                  tagCode: 'consume_31003',
                  tagName: '会员新体系',
                  tagType: null,
                  tagClass: 3,
                  parentCode: 'consume_2001',
                  fullId: null,
                  children: [
                    {
                      tagCode: 'consume_41001',
                      tagName: '联合会员业务',
                      tagType: null,
                      tagClass: 4,
                      parentCode: 'consume_31003',
                      fullId: null,
                      children: [
                        {
                          tagCode: 'consume_51001',
                          tagName: '新型联合会员',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_41001',
                          fullId: null,
                          children: []
                        },
                        {
                          tagCode: 'consume_51002',
                          tagName: '存量联合会员',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_41001',
                          fullId: null,
                          children: []
                        }
                      ]
                    },
                    {
                      tagCode: 'consume_41002',
                      tagName: '合作业务',
                      tagType: null,
                      tagClass: 4,
                      parentCode: 'consume_31003',
                      fullId: null,
                      children: [
                        {
                          tagCode: 'consume_51003',
                          tagName: '合作业务',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_41002',
                          fullId: null,
                          children: []
                        }
                      ]
                    },
                    {
                      tagCode: 'consume_41003',
                      tagName: '自有业务',
                      tagType: null,
                      tagClass: 4,
                      parentCode: 'consume_31003',
                      fullId: null,
                      children: [
                        {
                          tagCode: 'consume_51004',
                          tagName: '自有业务-自有会员',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_41003',
                          fullId: null,
                          children: []
                        },
                        {
                          tagCode: 'consume_51005',
                          tagName: '券包',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_41003',
                          fullId: null,
                          children: []
                        },
                        {
                          tagCode: 'consume_51006',
                          tagName: '自有业务-其他',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_41003',
                          fullId: null,
                          children: []
                        }
                      ]
                    }
                  ]
                },
                {
                  tagCode: 'consume_31004',
                  tagName: '有券用户',
                  tagType: 1,
                  tagClass: 3,
                  parentCode: 'consume_2001',
                  fullId: null,
                  children: []
                },
                {
                  tagCode: 'consume_31005',
                  tagName: '有效通看券张数标签',
                  tagType: 1,
                  tagClass: 3,
                  parentCode: 'consume_2001',
                  fullId: null,
                  children: []
                },
                {
                  tagCode: 'consume_31006',
                  tagName: '近30天消费通看券张数',
                  tagType: 1,
                  tagClass: 3,
                  parentCode: 'consume_2001',
                  fullId: null,
                  children: []
                },
                {
                  tagCode: 'consume_31007',
                  tagName: '当前在订视频通看券连续包用户',
                  tagType: 1,
                  tagClass: 3,
                  parentCode: 'consume_2001',
                  fullId: null,
                  children: []
                },
                {
                  tagCode: 'consume_31008',
                  tagName: '最近一次退订通看券连续包用户-日期',
                  tagType: 2,
                  tagClass: 3,
                  parentCode: 'consume_2001',
                  fullId: null,
                  children: []
                },
                {
                  tagCode: 'consume_31009',
                  tagName: '最近一次订购按次通看券包日期',
                  tagType: 2,
                  tagClass: 3,
                  parentCode: 'consume_2001',
                  fullId: null,
                  children: []
                }
              ]
            },
            {
              tagCode: 'consume_2002',
              tagName: '音乐',
              tagType: null,
              tagClass: 2,
              parentCode: 'consume',
              fullId: null,
              children: [
                {
                  tagCode: 'consume_32001',
                  tagName: '最近一次消费时间\n',
                  tagType: 1,
                  tagClass: 3,
                  parentCode: 'consume_2002',
                  fullId: null,
                  children: []
                },
                {
                  tagCode: 'consume_32002',
                  tagName: '音乐会员新体系',
                  tagType: null,
                  tagClass: 3,
                  parentCode: 'consume_2002',
                  fullId: null,
                  children: [
                    {
                      tagCode: 'consume_42001',
                      tagName: '联合会员业务',
                      tagType: null,
                      tagClass: 4,
                      parentCode: 'consume_32002',
                      fullId: null,
                      children: [
                        {
                          tagCode: 'consume_52001',
                          tagName: '新型联合会员',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_42001',
                          fullId: null,
                          children: []
                        },
                        {
                          tagCode: 'consume_52002',
                          tagName: '存量联合会员',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_42001',
                          fullId: null,
                          children: []
                        }
                      ]
                    },
                    {
                      tagCode: 'consume_42002',
                      tagName: '自有业务',
                      tagType: null,
                      tagClass: 4,
                      parentCode: 'consume_32002',
                      fullId: null,
                      children: [
                        {
                          tagCode: 'consume_52003',
                          tagName: '自有会员-白金会员',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_42002',
                          fullId: null,
                          children: []
                        },
                        {
                          tagCode: 'consume_52004',
                          tagName: '自有会员-其他会员',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_42002',
                          fullId: null,
                          children: []
                        },
                        {
                          tagCode: 'consume_52005',
                          tagName: '自有业务-其他',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_42002',
                          fullId: null,
                          children: []
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              tagCode: 'consume_2003',
              tagName: '数媒',
              tagType: null,
              tagClass: 2,
              parentCode: 'consume',
              fullId: null,
              children: [
                {
                  tagCode: 'consume_33001',
                  tagName: '最近一次消费时间\n',
                  tagType: 2,
                  tagClass: 3,
                  parentCode: 'consume_2003',
                  fullId: null,
                  children: []
                },
                {
                  tagCode: 'consume_33002',
                  tagName: '阅读会员新体系',
                  tagType: null,
                  tagClass: 3,
                  parentCode: 'consume_2003',
                  fullId: null,
                  children: [
                    {
                      tagCode: 'consume_43001',
                      tagName: '联合会员业务',
                      tagType: null,
                      tagClass: 4,
                      parentCode: 'consume_33002',
                      fullId: null,
                      children: [
                        {
                          tagCode: 'consume_53001',
                          tagName: '新型联合会员',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_43001',
                          fullId: null,
                          children: []
                        },
                        {
                          tagCode: 'consume_53002',
                          tagName: '存量联合会员',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_43001',
                          fullId: null,
                          children: []
                        }
                      ]
                    },
                    {
                      tagCode: 'consume_43002',
                      tagName: '合作业务',
                      tagType: null,
                      tagClass: 4,
                      parentCode: 'consume_33002',
                      fullId: null,
                      children: [
                        {
                          tagCode: 'consume_53003',
                          tagName: '合作业务',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_43002',
                          fullId: null,
                          children: []
                        }
                      ]
                    },
                    {
                      tagCode: 'consume_43003',
                      tagName: '自有业务',
                      tagType: null,
                      tagClass: 4,
                      parentCode: 'consume_33002',
                      fullId: null,
                      children: [
                        {
                          tagCode: 'consume_53004',
                          tagName: '自有业务-自有会员',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_43003',
                          fullId: null,
                          children: []
                        },
                        {
                          tagCode: 'consume_53005',
                          tagName: '自有业务-其他',
                          tagType: 1,
                          tagClass: 5,
                          parentCode: 'consume_43003',
                          fullId: null,
                          children: []
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              tagCode: 'consume_2004',
              tagName: '动漫',
              tagType: null,
              tagClass: 2,
              parentCode: 'consume',
              fullId: null,
              children: [
                {
                  tagCode: '3152',
                  tagName: '动漫会员',
                  tagType: 2,
                  tagClass: 3,
                  parentCode: 'consume_2004',
                  fullId: null,
                  children: []
                }
              ]
            },
            {
              tagCode: 'consume_2006',
              tagName: '视频彩铃',
              tagType: null,
              tagClass: 2,
              parentCode: 'consume',
              fullId: null,
              children: [
                {
                  tagCode: 'basic_videoring_4001',
                  tagName: '视频彩铃基础会员包用户',
                  tagType: 1,
                  tagClass: 3,
                  parentCode: 'consume_2006',
                  fullId: null,
                  children: []
                },
                {
                  tagCode: 'basic_videoring_4002',
                  tagName: '视频彩铃包月用户',
                  tagType: 1,
                  tagClass: 3,
                  parentCode: 'consume_2006',
                  fullId: null,
                  children: []
                },
                {
                  tagCode: 'basic_videoring_4003',
                  tagName: '视频彩铃专属订阅包用户',
                  tagType: 1,
                  tagClass: 3,
                  parentCode: 'consume_2006',
                  fullId: null,
                  children: []
                },
                {
                  tagCode: 'consume_3602',
                  tagName: '近60天音乐app内视频彩铃内容订购次数',
                  tagType: 3,
                  tagClass: 3,
                  parentCode: 'consume_2006',
                  fullId: null,
                  children: []
                }
              ]
            }
          ]
        }
      ],
      editableTabsValue: '咪咕标签',
      editableTabs: [
        {
          title: '咪咕标签',
          name: '咪咕标签'
        }
      ],
      tabIndex: 2,
      activeNames: [],
      visible: false,
      tagTreeList: [
        {
          title: '我的收藏标签'
        },
        { title: '标签' },
        { title: '省专标签-云南' },
        { title: '省专标签-北京' }
      ],
      defaultProps: {
        children: 'children',
        label: 'tagName'
      },
      // right
      unionTypeTxt: {
        and: '且',
        or: '或'
      },
      treeData2: {
        咪咕标签: [],
        云南标签: [],
        北京标签: []
      },
      oldId: 2,
      dialogVisible: false,
      proTab: '云南标签',
      params: {
        咪咕标签: {},
        云南标签: {},
        北京标签: {}
      },
      flag: {
        咪咕标签: false,
        云南标签: false,
        北京标签: false
      },
      isEnterCtrlKey: false
    }
  },
  mounted() {
    this.dragControllerDiv()
    this.initMiguData()
    this.initYunnanData()
    this.initBeijingData()
    // // 处理数据为一棵树
    let newdata = [
      { tagName: '我的收藏', children: this.data, tagClass: 0 },
      { tagName: '标签', children: this.data, tagClass: 0 },
      { tagName: '云南标签', children: this.data, tagClass: 0 },
      { tagName: '北京标签', children: this.data, tagClass: 0 }
    ]
    this.data = newdata
  },
  watch: {
    filterText(val) {
      this.$refs.leftTree.filter(val)
    },
    editableTabsValue(newval) {
      console.log(newval)
    }
  },
  methods: {
    handleDragStart(node, event) {
      console.log(event)
      this.isEnterCtrlKey = event.ctrlKey || event.metaKey
      console.log(this.isEnterCtrlKey)
    },
    handleDragEnd(draggingNode, dropNode, position) {
      if (this.isEnterCtrlKey && !draggingNode.isLeftTree) {
        console.log('右侧拖拽结束')
        const data = JSON.parse(JSON.stringify(draggingNode.data))
        data.id = Math.round(Math.random() * 100000)
        console.log(position)
        //   if (position === 'inner') {
        //     // this.$refs.rightTree[0].insertAfter(data, dropNode)
        //     this.$message.warning('复制标签只允许同级复制')
        //     return false
        //   } else {
        // console.log(data, dropNode)
        //要追加的位置
        this.$refs.rightTree[0].append(
          data,
          this.$refs.rightTree[0].getNode(dropNode)
        )
        //   }
      }
    },
    // 全量客户不展示
    returnRootNode(node) {
      return node.data.columnName !== '全量标签'
    },
    // 初始化咪咕标签
    initMiguData() {
      this.treeData2['咪咕标签'] = [
        {
          id: 1,
          parentId: 0,
          isFission: 0,
          columnName: '全量标签',
          type: 'root',
          calType: '=',
          columnNum: '0',
          unionType: 'and',
          resId: 'root',
          isCyclicity: 0,
          selectedValues: ['Y'],
          children: [],
          disabled: true
        }
      ]
      this.params['咪咕标签'] = {
        executeType: '1',
        isPushIop: '1',
        labelType: '01',
        treeDetails: [
          {
            id: 1,
            parentId: 0,
            isFission: 0,
            columnName: '全量标签',
            type: 'root',
            calType: '=',
            columnNum: '0',
            unionType: 'and',
            resId: 'root',
            isCyclicity: 0,
            selectedValues: ['Y'],
            children: []
          }
        ]
      }
    },
    // 初始化云南标签
    initYunnanData() {
      this.treeData2['云南标签'] = [
        {
          id: 1,
          columnName: '全量标签',
          unionType: 'and',
          calType: '=',
          type: 'root',
          isFission: 0,
          isCyclicity: 0,
          children: [],
          disabled: true
        }
      ]
      this.params['云南标签'] = {
        executeType: '1',
        isPushIop: '1',
        labelType: '02',
        treeDetails: [
          {
            id: 1,
            parentId: 0,
            isFission: 0,
            columnName: '全量标签',
            type: 'root',
            calType: '=',
            columnNum: '0',
            unionType: 'and',
            resId: 'root',
            isCyclicity: 0,
            selectedValues: ['Y'],
            children: []
          }
        ]
      }
    },
    // 初始化北京标签
    initBeijingData() {
      this.treeData2['北京标签'] = [
        {
          id: 1,
          columnName: '全量标签',
          unionType: 'and',
          calType: '=',
          type: 'root',
          isFission: 0,
          isCyclicity: 0,
          children: [],
          disabled: true
        }
      ]
      this.params['北京标签'] = {
        executeType: '1',
        isPushIop: '1',
        labelType: '05',
        treeDetails: [
          {
            id: 1,
            parentId: 0,
            isFission: 0,
            columnName: '全量标签',
            type: 'root',
            calType: '=',
            columnNum: '0',
            unionType: 'and',
            resId: 'root',
            isCyclicity: 0,
            selectedValues: ['Y'],
            children: []
          }
        ]
      }
    },
    // 清空规则
    initRules() {
      if (this.treeData2[this.editableTabsValue][0].children.length === 0) {
        this.$message.warning('所有标签已全部清除，无需清空！')
        return
      }
      this.$confirm('此操作将清除当前全部标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.editableTabsValue === '咪咕标签') {
            this.initMiguData()
          } else if (this.editableTabsValue === '云南标签') {
            this.initYunnanData()
          } else {
            this.initBeijingData()
          }
          this.$message({
            type: 'success',
            message: '清除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消清除'
          })
        })
    },
    // 处理parantid
    updateTreeParentId(tree) {
      const deepUpdateParentId = (tree) => {
        // 如果有children,children里所有的小孩，prantid都为当前节点id
        if (tree.children && tree.children.length) {
          tree.children.forEach((child) => {
            child.parentId = tree.id
            deepUpdateParentId(child)
          })
        }
      }
      deepUpdateParentId(tree)
    },
    // 组合标签
    combinationTag() {
      let arr = this.$refs.rightTree[0].getCheckedNodes()
      if (arr.length === 0) {
        this.$message.warning('请先进行标签勾选！')
        return false
      }
      this.updateTreeParentId(this.treeData2['咪咕标签'][0])
      let newarr = []
      arr.forEach((item) => {
        if (item.children && item.children.length) {
          item.children.forEach((child) => {
            newarr.push(child.id)
          })
        }
      })
      arr = arr.filter((el) => {
        return !newarr.includes(el.id)
      })
      const firstParentId = arr[0].parentId
      let flag = arr.every((el) => {
        return el.parentId === firstParentId
      })
      if (!flag) {
        this.$message.warning('不可进行组合标签')
        return false
      }
      // 父亲下添加
      const deepTree = (tree) => {
        if (arr[0].parentId === tree.id) {
          tree.children.push({
            unionType: 'and',
            label: '组合标签',
            calType: '=',
            type: 'normal',
            isFission: 0,
            id: this.oldId++,
            children: arr
          })
        }
        if (tree.children && tree.children.length) {
          tree.children.forEach((child) => {
            deepTree(child)
          })
        }
      }
      deepTree(this.treeData2['咪咕标签'][0])
      // 删除本身位置
      arr.forEach((item, index) => {
        this.$refs.rightTree[0].remove(arr[index])
      })
      this.updateTreeParentId(this.treeData2['咪咕标签'][0])
    },
    // 新增tab页省份
    addProTab(val) {
      if (this.action === 'add') {
        this.dialogVisible = true
        let newTabName = val
        if (this.editableTabs.length === 1) {
          this.editableTabs.push({
            title: newTabName,
            name: newTabName
          })
        } else {
          const obj = {
            title: newTabName,
            name: newTabName
          }
          this.editableTabs.splice(1, 1, obj)
        }

        this.editableTabsValue = newTabName
      }
      if (this.action === 'remove') {
        let tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === this.targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === this.targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }

        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter((tab) => tab.name !== this.targetName)
      }
    },
    // 弹框单选切换
    proTabChange(val) {
      this.addProTab(val)
    },
    handleClose() {
      this.dialogVisible = false
    },
    // 保存客群
    keepSave() {
      this.updateTreeParentId(this.treeData2['咪咕标签'][0])
    },
    // 节点过滤
    filterNode(value, data) {
      if (!value) return true
      return data.tagName.indexOf(value) !== -1
    },
    // 点击新增删减
    handleTabsEdit(targetName, action) {
      this.action = action
      this.targetName = targetName
      this.addProTab(this.proTab)
    },
    // 折叠面板选中
    handleChange(data) {
      console.log(data)
    },
    // 左侧开始拖拽
    handleDragstart(node, event) {
      console.log('左侧拖拽结束')
      if (node.isLeaf) {
        node.data.unionType = 'and'
        node.data.columnName = node.data.tagName
        node.data.calType = '='
        node.data.type = 'normal'
        node.data.isFission = 1
        node.data.id = this.oldId++
        node.isLeftTree = true
        this.$set(node, 'data', JSON.parse(JSON.stringify(node.data)))
        // 如果是叶子节点才能拖拽
        // 传递给右侧
        if (this.editableTabsValue === '咪咕标签') {
          this.$refs.rightTree[0].$emit('tree-node-drag-start', event, {
            node: node
          })
        } else {
          this.$refs.rightTree[1].$emit('tree-node-drag-start', event, {
            node: node
          })
        }
      }
    },
    // 左侧拖动栏
    dragControllerDiv: function () {
      const resize = document.getElementsByClassName('resize')
      const left = document.getElementsByClassName('left')
      const mid = document.getElementsByClassName('mid')
      const box = document.getElementsByClassName('box')
      const activeColor = '#818181' // 拖动块选中的颜色
      const defaultColor = '#d6d6d6' // 拖动块默认的颜色
      const leftMinWidth = 20 // 左边区域的最小宽度为300px
      const rightMinWidth = 600 //右边区域最小宽度为600px
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
          //颜色改变提醒
          resize[i].style.background = activeColor
          const startX = e.clientX
          resize[i].left = resize[i].offsetLeft
          // 鼠标拖动事件
          document.onmousemove = function (e) {
            const endX = e.clientX
            let moveLen = resize[i].left + (endX - startX) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            const maxT = box[i].clientWidth - resize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

            if (moveLen < leftMinWidth) moveLen = leftMinWidth
            if (moveLen > maxT - rightMinWidth) moveLen = maxT - rightMinWidth

            resize[i].style.left = moveLen // 设置左侧区域的宽度
            // console.log(moveLen, this.moveLen)
            for (let j = 0; j < left.length; j++) {
              left[j].style.width = moveLen + 'px'
              mid[j].style.width = box[i].clientWidth - moveLen - 10 + 'px'
            }
          }
          // 鼠标松开事件
          document.onmouseup = function () {
            //颜色恢复
            resize[i].style.background = defaultColor
            document.onmousemove = null
            document.onmouseup = null
            resize[i].releaseCapture && resize[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          }
          resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false
        }
      }
    },
    // 左侧允许拖拽
    allowDrag(node) {
      return node.isLeaf
    },
    // 拖拽结束
    handleDragend(draggingNode, endNode, position, event) {
      // 插入一个空节点用于占位
      let emptyData = { tagCode: +new Date(), children: [] }
      this.$refs.leftTree.insertBefore(emptyData, draggingNode)
      if (this.editableTabsValue === '咪咕标签') {
        this.$refs.rightTree[0].$emit('tree-node-drag-end', event)
      } else {
        this.$refs.rightTree[1].$emit('tree-node-drag-end', event)
      }
      this.$nextTick(() => {
        // 如果是移动到了当前树上，需要清掉空节点
        if (this.$refs.leftTree.getNode(draggingNode.data)) {
          this.$refs.leftTree.remove(emptyData)
        } else {
          // 如果移动到了别的树上，需要恢复该节点，并清掉空节点
          let data = JSON.parse(JSON.stringify(draggingNode.data))
          this.$refs.leftTree.insertAfter(
            data,
            this.$refs.leftTree.getNode(emptyData)
          )
          this.$refs.leftTree.remove(emptyData)
        }
      })
    },
    // 右侧允许放置
    allowDrop(moveNode, inNode, type) {
      if (inNode.data.type === 'root') {
        return type === 'inner'
      } else {
        return true
      }
    },
    returnFalse() {
      return false
    },
    // 移除右侧节点
    removeNode(node) {
      if (this.editableTabsValue === '咪咕标签') {
        this.$refs.rightTree[0].remove(node)
      } else {
        this.$refs.rightTree[1].remove(node)
      }
    },
    // 切换且和或
    toggleUnionType(data) {
      data.unionType = data.unionType === 'and' ? 'or' : 'and'
    }
  }
}
</script>

<style >
body {
  margin: 0;
  padding: 0;
}
/* 拖拽相关样式 */
/*包围div样式*/
.box {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}
/*左侧div样式*/
.left {
  position: relative;
  width: 300px; /*左侧初始化宽度*/
  height: 100%;
  background: #ffffff;
  /* float: left; */
  overflow: hidden;
}
.left-search {
  padding: 0px 0 10px;
}
/*拖拽区div样式*/
.resize {
  cursor: col-resize;
  /* float: left; */
  position: relative;
  top: 45%;
  background-color: #d6d6d6;
  border-radius: 5px;
  margin-top: -10px;
  width: 10px;
  height: 50px;
  background-size: cover;
  background-position: center;
  /*z-index: 99999;*/
  font-size: 32px;
  color: white;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
  color: #444444;
}
/*右侧div'样式*/
.mid {
  position: relative;
  width: 100%;
  /* float: left; */
  /* width: 68%; */
  /*右侧初始化宽度*/
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  /* flex: 1; */
  height: 100%;
  background: #fff;
  box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
  padding: 0 20px;
}
.left .footer {
  color: #0d6bd7;
  background: rgba(100, 244, 249, 0.8);
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.el-tabs__nav .el-tabs__item:nth-child(1) span {
  display: none;
}
/* right */

.tag-title {
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tag-title .tag-title-right {
  color: #1a63b7;
  text-decoration: underline;
}
.tag-title .tag-title-right span,
.tag-title .refresh {
  cursor: pointer;
  zoom: 1;
}
.tag-title span {
  margin: 0 5px;
}
.tag-title .refresh {
  color: #2083f4;
}
.targetCount {
  color: rgba(236, 137, 32, 100);
}
.custom-tree
  > .el-tree-node:first-child
  > .el-tree-node__content
  > .el-checkbox {
  display: none;
}
.tag-tree,
.custom-tree {
  width: 100%;
}
/* .tree {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  font-size: 16px;
  overflow-x: hidden;
} */
/* 树形结构节点添加连线 */
.custom-tree .el-tree-node {
  position: relative;
  padding-left: 16px;
  padding: 5px 0;
  min-height: 20px;
}

.custom-tree .el-tree-node__children {
  padding-left: 16px;
}

.custom-tree .el-tree-node :last-child:before {
  height: 48px;
}

.custom-tree .el-tree > .el-tree-node:before {
  border-left: none;
}

.custom-tree.el-tree > .el-tree-node:after {
  border-top: none;
}

.custom-tree .el-tree-node:before {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.custom-tree > .el-tree-node:before {
  display: none;
}

.custom-tree .el-tree-node:after {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
/* .custom-tree .el-tree-node__expand-icon.is-leaf {
  display: none;
} */
.custom-tree .el-tree-node .el-tree-node__content {
  padding-left: 0 !important;
  height: 32px !important;
}
.custom-tree .el-tree-node .el-tree-node__content .expanded {
  pointer-events: none;
  z-index: 1;
}

.custom-tree .el-tree-node:before {
  border-left: 1px dashed #b8b9bb;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.custom-tree .el-tree-node:after {
  border-top: 1px dashed #b8b9bb;
  height: 20px;
  top: 22px;
  width: 18px;
}
.custom-tree-node {
  width: 100%;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom-tree-node .custom-tree-node-left {
  display: flex;
  align-items: center;
}
.custom-tree-node .union-type {
  display: none;
  content: '且';
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  text-align: center;
  background: #ccc;
  color: #606266;
  position: absolute;
  left: 3px;
  top: 0;
  z-index: 1;
  font-style: normal;
}

.custom-tree-node span {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
}
.custom-tree-node .delete-btn {
  margin-left: 5px;
}
.custom-tree-node .tag-name,
.tag-label {
  height: 20px;
  line-height: 20px;
  padding: 4px 8px;
  background: #a2c4f9;
}
.custom-tree-node .tag-label {
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-tree-node .el-select--mini {
  width: 60px;
  margin: 0 5px;
}
/* .custom-tree-node .el-select--mini .el-input__inner {
  height: 20px !important;
  line-height: 20px !important;
} */
.custom-tree-node .special-tag {
  border: 1px solid rgba(53, 32, 244, 100);
  color: rgba(53, 32, 244, 100);
  display: inline-block;
  padding: 0 5px;
  margin-right: 5vh;
}
/* ::v-deep .el-dialog__body {
  text-align: center;
} */
</style>
